<template>
  <van-popup
    v-model:show="visible"
    :closeable="false"
    position="bottom"
    @close="handleClose"
  >
    <van-picker-group
      title="预约日期"
      :tabs="['选择日期', '选择时间']"
      next-step-text="下一步"
      @confirm="handleOk"
      @cancel="handleClose"
    >
      <van-date-picker v-model="currentDate" />
      <van-time-picker v-model="currentTime" />
    </van-picker-group>
  </van-popup>
</template>

<script lang="ts" setup>
  import { ref, withDefaults, defineProps } from 'vue';
  import dayjs from 'dayjs';

  interface Props {
    value: string;
    close: () => void;
    resolve: (x?: any) => void;
  }
  const props = withDefaults(defineProps<Props>(), {
    close: () => {
      return () => {};
    },
    resolve: () => {
      return () => {};
    },
  });

  let type = '';
  const loading = ref<boolean>(false);
  const visible = ref<boolean>(true);

  const currentDate = ref(['2022', '06', '01']);
  const currentTime = ref(['12', '00']);

  const getDetail = () => {
    const obj = dayjs(props.value || dayjs())
      .format('YYYY-MM-DD')
      .split('-');
    const date = dayjs(props.value || dayjs())
      .format('HH:mm:ss')
      .split(':');
    currentDate.value = [`${obj[0]}`, `${obj[1]}`, `${obj[2]}`];
    currentTime.value = [`${date[0]}`, `${date[1]}`];
  };

  getDetail();

  const handleOk = () => {
    handleSuccess();
  };

  const handleSuccess = () => {
    type = 'reslove';
    visible.value = false;
  };

  const handleClose = () => {
    loading.value = false;
    if (type === 'reslove') {
      const date = currentDate.value;
      const time = currentTime.value;
      props.resolve(
        `${date[0]}-${date[1]}-${date[2]} ${time[0]}:${time[1]}:00`
      );
    } else {
      props.close();
    }
  };
</script>

<style lang="less"></style>
